<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="app">
        <form @submit.prevent="handleSubmit">
            <span>用户名称:</span>
            <input type="text" v-model="user.username"><br>
            <span>用户密码:</span>
            <input type="password" v-model="user.pwd"><br>
            <span>性别:</span>
            <input type="radio" id="female" value="female" v-model="user.gender">
            <label for="female">女</label>
            <input type="radio" id="male" value="male" v-model="user.gender">
            <label for="male">男</label><br>
            <span>爱好：</span>
            <input type="checkbox" id="basketball" value="basketball" v-model="user.hobbys">
            <label for="basketball">篮球</label>
            <input type="checkbox" id="football" value="football" v-model="user.hobbys">
            <label for="football">足球</label>
            <input type="checkbox" id="pingpang" value="pingpang" v-model="user.hobbys">
            <label for="pingpang">乒乓球</label><br>
            <span>就业城市：</span>
            <select v-model="user.selCityId">
                <option value="">请选择</option>
                <option v-for="city in citys" :value="city.id">{{ city.name }}</option>
            </select><br>
            <textarea rows="5" cols="30" v-model="user.desc"></textarea><br>
            <input type="submit" value="注册">
        </form>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    user: {
                        username: '',
                        pwd: '',
                        gender: 'female',
                        hobbys: [],
                        selCityId: '',
                        desc: ''
                    },
                    citys: [
                        { id: 1, name: "北京" },
                        { id: 2, name: "上海" },
                        { id: 3, name: "广州"}
                    ]
                }
            },
            methods: {
                handleSubmit(event) {
                    console.log(JSON.stringify(this.user))
                }
            }
        }).mount('#app');
    </script>

</body>

</html>